import { setProfileAction } from '@/store/action/profile'
import { RootState } from '@/types/store'
import { NavBar, Popup, Input, TextArea } from 'antd-mobile'
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import style from './index.module.scss'
export type PopType = {
  visbile: boolean
  close: () => void
  type: 'name' | 'intro'
}
function InputPop({ visbile, close, type }: PopType) {
  const [input, setInput] = useState('1')
  const { profile } = useSelector((state: RootState) => state.profile)
  const dispatch = useDispatch()

  // 提交
  const submit = async () => {
    await dispatch(setProfileAction(type, input))
    close()
  }
  useEffect(() => {
    setInput(type === 'name' ? profile.name : profile.intro || '')
  }, [visbile])
  return (
    <Popup
      destroyOnClose
      visible={visbile}
      position="right"
      bodyStyle={{ width: '100vw' }}
    >
      <NavBar
        style={{
          '--border-bottom': '1px #eee solid',
        }}
        right={
          <span onClick={submit} className={style.submit}>
            提交
          </span>
        }
        onBack={close}
      >
        编辑{type === 'name' ? '昵称' : '介绍'}
      </NavBar>
      {/* 输入框 */}
      {type === 'name' && (
        <div className={style.nameWrapper}>
          <Input
            value={input}
            onChange={(value) => {
              setInput(value)
            }}
            placeholder="请输入内容"
          />
        </div>
      )}
      {/* 文本域 */}
      {type === 'intro' && (
        <div className={style.infoWrapper}>
          <TextArea
            value={input}
            onChange={(value) => {
              setInput(value)
            }}
            showCount
          />
        </div>
      )}
    </Popup>
  )
}

export default InputPop
